<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/login.css">
</head>

<body>
    <video id="v1" autoplay loop muted>
        <source src="../static/jing.mp4" />
    </video>
    <section>
        <div class="box">
            <div class="alert alert-danger alert-dismissible fade show invisible text-center"
                style="width: 25rem; margin-top: -8rem;" role="alert">
                <strong>提示：</strong><label for="" id="msg" style="height: 0.5rem; width: 9rem;">555</label>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="container">

                <div class="form">
                    <h2>问卷调查</h2>
                    <form id="loginForm" action="/loginDone" method="POST">

                        <div class="inputBox">
                            <input type="text" id="username" name="username" placeholder="账号">

                        </div>
                        <div class="inputBox">
                            <input type="password" id="password" name="password" placeholder="密码">

                        </div>
                        <div class="form-group form-check row ">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                            <label class="form-check-label" for="exampleCheck1">记住我</label>
                        </div>
                        <div class="inputBox">
                            <button type="button" class="btn btn-outline-primary" onclick="jump()">登录</button>
                            <button type="button" class="btn btn-outline-primary" onclick="register()">注册</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script>
        function register() {
            window.location.href = '/register'
        }
        function jump() {

            let username = $('#username').val();
            let password = $('#password').val();
            if (username == 'shuaihui' && password == 17689974706) {
                if (username.length > 0 && password.length > 0) {
                    $.ajax({
                        url: "/loginDone",
                        type: "POST",
                        data: $('#loginForm').serialize(),
                        dataType: "json",
                        success: function (res) {
                            console.log(res);
                            if (res.code === 200) {
                                window.location.href = "/";
                            } else {
                                alert_fn(res.msg);
                            }
                        },
                        error: function (msg) {
                            alert_fn('网络或者服务器有问题')
                        }
                    })
                } else {
                    alert_fn('用户和密码不能为空');
                    return false;
                }
            }else{
                if (username.length > 0 && password.length > 0) {
                    $.ajax({
                        url: "/loginDone",
                        type: "POST",
                        data: $('#loginForm').serialize(),
                        dataType: "json",
                        success: function (res) {
                            console.log(res);
                            if (res.code === 200) {
                                window.location.href = "/indexyh";
                            } else {
                                alert_fn(res.msg);
                            }
                        },
                        error: function (msg) {
                            alert_fn('网络或者服务器有问题')
                        }
                    })
                } else {
                    alert_fn('用户和密码不能为空');
                    return false;
                }
            }

        }
        function alert_fn(msg) {
            msg = msg || '密码不能为空，两次密码应该一致';
            $('#msg').text(msg);

            $('.invisible').removeClass('invisible');

            setTimeout(() => {
                $('.alert').addClass('invisible');
            }, 3000)
        }
    </script>
</body>

</html>